Deno Fresh で Godot で作ったゲームを公開してみる

#ChatGPTより引用

Godot でエクスポートしたゲームを Deno Fresh を使って Web サイト上に公開するには、以下の手順で行うのが一般的です。Deno Fresh は Deno 向けのフルスタック Web フレームワークで、SSR（サーバーサイドレンダリング）や静的ファイルの配信にも対応しているため、Godot の HTML5 エクスポートも扱えます。

✅ 前提条件

• Godot 4.x がインストールされている

• deno コマンドが使える（Deno インストール）

• fresh CLI が使える（deno run -A https://fresh.deno.dev でプロジェクト作成可）

🔧 手順

1. Godot で HTML5 用にゲームをエクスポート

Godot のエクスポートテンプレートを使って、ゲームを Web 向けにビルドします。

1. Godot を開く

2. [Project] > [Export] を開く

3. 「Add...」をクリックして「Web」を選択

4. エクスポート先を指定（例：./dist/）

5. 「Export Project」ボタンで出力

これにより index.html, game.pck, game.wasm, game.js などが生成されます。

2. Fresh プロジェクトを作成

deno run -A https://fresh.deno.dev my-game-site
cd my-game-site

3. Godot のビルド出力を static/ フォルダに配置

Fresh では static/ 以下にあるファイルはそのまま公開されます。

mkdir -p static/game
cp -r ../godot-project/dist/* static/game/

4. ページを作成してゲームを表示

routes/game.tsx を作成：

/** @jsx h */
import { h } from "preact";

export default function Game() {
  return (
    <div>
      <h1>My Godot Game</h1>
      <iframe
        src="/game/index.html"
        width="960"
        height="600"
        allowFullScreen
        style="border:none;"
      />
    </div>
  );
}

5. 開発用にローカルサーバを起動

deno task start

そして http://localhost:8000/game にアクセスすれば、Godot のゲームが iframe で表示されるはずです。

💡補足ポイント

• ルートで表示したい場合：routes/index.tsx に同様のコードを記述

• キャッシュ対策：HTML の中のファイル名を game.js?v=1.0.0 のようにバージョン管理

• SEO非対応：iframe 埋め込みだと SEO は弱めです。気になる場合は、別ページにするか SEO対応のページも用意を。

✅ 完成例

/my-game-site
├── static/
│   └── game/
│       ├── index.html
│       ├── game.js
│       ├── game.pck
│       └── game.wasm
├── routes/
│   └── game.tsx
├── main.ts
└── ...

必要であれば、**デプロイ（例：Deno Deploy、Vercel、Netlify）**までの手順も説明できます！どこに公開したいですか？